
<template>
    <Breadcrumb />
    <el-row v-if="!login" class="userModel" :gutter="20">
        <el-col :span="6" :offset="6">
            <input type="text" placeholder="请输入昵称" v-model="username" width="500px">
            <el-button type="primary" @click="enterChat">Enter</el-button>
        </el-col>
    </el-row>
    
    <Chat v-if="login" class="chat-main" v-model="login" :username="username" @exitChat="exitChat" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Breadcrumb from "@/components/common/breadcrumb/index.vue"
import Chat from "@/components/ws/Chat.vue"
import { changeCurLabel } from '@/assets/js/common'

import { useStore } from 'vuex'

let username = ref("zhangsan")
let store = useStore()  
let login = ref(false)

onMounted(()=>{
    changeCurLabel("效率管理")
    // 从localStorage中获取用户信息
    username.value = localStorage.getItem("username")
    if (username.value) {
        login.value = true
    }
})

// 用户登录后，进入聊天页面
function enterChat() {
    // 存在用户信息到localStorage
    if (username.value) {
        localStorage.setItem("username", username.value)
    }
    // 切换登录状态
    login.value = true
}

function exitChat(){
    login.value = false
}

</script>

<style scoped>
.userModel {
    position: fixed;
    top: 120px;
    left: 170px;
    width: 80%;
    height: 80%;
}
input {
    width: 300px;
    height: 30px;
    border: 0.1px solid #c8c7c7;
    border-radius: 10px;
}

</style>